<template>
  <view class="tags">
    <view class="tag" v-for="item in options" :key="item.key" :style="{ backgroundColor: item.backgroundColor }">
      <text>{{num(data[item.key])}}</text>
      <text>{{ item.label }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MeetingRecord',
  props:{
    data:{
      type:Object,
      default:()=>({})
    }
  },
  data() {
    return {
      options: [
        {
          key: 'shouldArriveNum',
          label: '应到人数',
          backgroundColor: '#88B4C4',
        },
        {
          key: 'actualArriveNum',
          label: '实到人数',
          backgroundColor: '#88C49C',
        },
        {
          key: 'score',
          label: '会议评分',
          backgroundColor: '#888EC4',
        },
      ],
    }
  },
  computed:{
    num(){
      return function(val){
        return ( val??'') === '' ? '--' : val
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tags {
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .tag {
    width: 216rpx;
    height: 140rpx;
    box-shadow: 0rpx 5rpx 10rpx 1rpx rgba(188, 188, 188, 0.16);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    color: #fff;
    font-size: 28rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    & text:first-child {
      font-size: 44rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
    }
  }
}
</style>
